<!-- 
 * 需求管理
 * @author: 冯宇
 * @since: 2022-05-16
 * index.vue
-->
<template>
  <div class="active-container h100">
    <router-view v-show="routerCutLevel === 3" class="detailsPage"></router-view>
    <div v-show="routerCutLevel === 2" class="listPage">

      <Filters :formModel="data.formModel" :formLabel="data.formLabel" @reset="resizeForm" @filter="getActivityList">
      </Filters>

      <TableCom :tableHeader="data.tableHeader" :tableData="data.tableData" :btnData="data.btnData"
        @getCurrentChange="getCurrentChange" @getSizeChange="getSizeChange" @comEvent="comEvent"
        @getSelectChange="getSelectChange" :isShowCheckbox="true" @colSelect="colSelect" @refresh="refreshTable"
        :pagination="data.pagination" :loading="data.loading" handleWidth="250">
        <el-button v-for="(item, index) in data.btnList" :key="index" class="tableBtnCss"
          :style="{ backgroundColor: item.bgColor }" @click="userManageBtnList(index)">
          <svg-icon :name="item.icon" v-if="item.icon"></svg-icon>
          {{ item.name }}
        </el-button>
      </TableCom>

      <!-- 上传文件 -->
      <el-dialog v-model="isShowLead" title="科技活动导入" width="30%" :before-close="() => (isShowLead = false)">
        <uploadDownload @upload="uploadFile"></uploadDownload>
      </el-dialog>

      <!-- 活动报名人员列表 -->
      <el-dialog v-model="data.signUpDialog" :show-close="false">
        <template #title>
          <div class="person-list">
            <div class="title-left">已报名人员列表</div>
            <div class="title-right" @click="exportList">
              <i class="iconfont icon-daochu1"></i>
              <span>导出列表</span>
            </div>
            <i class="iconfont icon-guanbi1" @click="data.signUpDialog = false"></i>
          </div>
        </template>
        <template #default>
          <div>
            <el-table :data="data.signUpTableData" border>
              <el-table-column type="index" label="序号" width="60" align="center" />
              <el-table-column prop="applyPerson" label="姓名" align="center" />
              <el-table-column prop="applyPhone" label="手机号码" align="center" />
              <el-table-column prop="applyCompany" label="企业名称" align="center" />
            </el-table>
            <div class="pages">
              <el-pagination :currentPage="data.signUpPagination.currentPage" :page-size="data.signUpPagination.pageSize"
                background layout="total, prev, pager, next" :total="data.signUpPagination.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { reactive, computed, ref } from 'vue'
import { getActivityListApi, batchActivityApi, activityPersonApi, dowloadActivityPersonApi } from '@/api/interface/activity.js'
import { colFilters, batchHandle, lineHandle, fileDownload } from '@/utils/common.js'

import { ElMessageBox, ElMessage } from 'element-plus'

import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
const router = useRouter()
const store = useStore()
const isShowLead = ref(false)

const routerCutLevel = computed(() => {
  return store.getters['setting/routerCutLevel']
})

const data = reactive({
  formModel: {
    activityName: '',
    activityTime: [],
    publishPerson: '',
    valid: '',
  },
  formLabel: [
    {
      label: '活动名称',
      model: "activityName",
      type: "text",
      width: '160',
      placeholder: '请输入需求名称',
    },
    {
      label: '活动时间',
      model: "activityTime",
      type: "dateRange",
      width: '360',
      option: [],
    },
    {
      label: '活动创建者',
      model: "publishPerson",
      type: "text",
      width: '160',
      placeholder: '请输入活动创建者名称',
    },
    {
      label: '是否启用',
      model: "valid",
      type: "select",
      width: '160',
      option: [
        {
          key: '全部',
          value: ''
        },
        {
          key: '启用',
          value: true
        },
        {
          key: '禁用',
          value: false
        },
      ],
    },
  ],
  btnList: [
    {
      name: '新增活动',
      bgColor: '#25D390',
    },
    // {
    //   name: '导入活动',
    //   bgColor: '#00A2FF',
    // },
    // {
    //   name: '导出全量活动',
    //   bgColor: '#00A2FF',
    // },
    // {
    //   name: '导出选择活动',
    //   bgColor: '#00A2FF',
    // },
    {
      name: '批量启用',
      bgColor: '#00A2FF',
    },
    {
      name: '批量禁用',
      bgColor: '#FFB018',
    },
    {
      name: '批量删除',
      bgColor: '#F74B33',
    },
  ],
  tableHeader: [
    {
      label: '活动名称',
      prop: 'activityName',
    },
    {
      label: '活动图片',
      prop: "logoUrl",
      isImg: true,
    },
    {
      label: '活动时间',
      prop: 'activityDate',
    },
    {
      label: '活动地址',
      prop: 'allAddress',
    },
    {
      label: '活动创建者',
      prop: 'publishPerson',
    },
    {
      label: '活动创建时间',
      prop: 'publishDate',
    },
    {
      label: '活动报名人数',
      prop: 'activityPersonCount',
    },
    {
      label: '活动状态',
      prop: 'activityStatusName',
    },
  ],
  tableData: [],
  btnData: [
    {
      name: '查看报名人员',
      color: '#00A2FF',
      change: 'applicant',
    },
    {
      name: '编辑',
      color: '#25D390',
      change: 'edit',
    },
    {
      name: '删除',
      color: '#F74B33',
      change: 'del',
    },
    {
      name: '是否启用',
      isStart: true,
      prop: 'valid',
      change: 'enable',
    },
  ],
  currentSelectList: [],
  pagination: {
    currentPage: 1,
    size: 10,
    total: 0,
  },
  signUpDialog: false,
  activeId: '',
  signUpTableData: [],
  signUpPagination: {
    currentPage: 1,
    pageSize: 10,
    total: 0,
  },
  loading: false,
})


//获取所有活动列表
const getActivityList = () => {
  data.loading = true
  const params = {
    orderType: "desc",
    orderField: "publishDate",
    activityName: data.formModel.activityName,
    startDate: data.formModel.activityTime[0],
    endDate: data.formModel.activityTime[1],
    ipi: data.pagination.currentPage,
    ips: data.pagination.size,
    valid: data.formModel.valid,
    publishPerson: data.formModel.publishPerson,
    // activityStatus: '',
    // activityAreaCode:'',
    // activityCityCode:'',
    // activityProvinceCode:'',
    // activityType:"",
  }
  getActivityListApi(JSON.stringify(params)).then(res => {
    if (res.status === 200) {
      const keyArr = res.data.result.map(v => {
        v.activityDate = v.activityStartDate + ' - ' + v.activityEndDate
        v.allAddress = v.activityProvinceName + v.activityCityName + v.activityAreaName + v.activityAddress
        return v
      })
      data.tableData = keyArr
      data.loading = false
      data.pagination.total = res.data.total
    }
  })
}
getActivityList()
//重置搜索条件
const resizeForm = () => {
  data.formModel.activityName = ''
  data.formModel.activityTime = []
  data.formModel.publishPerson = ''
  data.formModel.valid = ''
  getActivityList()
}




//列筛选
const colSelect = (headerArr, type, e, currentItem) => {
  if (type === 'filter') {
    const currentData = colFilters(headerArr, e, currentItem, data.tableHeader)
    data.tableHeader = currentData
  } else {
    //全选/全取消
    data.tableHeader = headerArr
  }
}
//刷新
const refreshTable = () => {
  getActivityList()
}
//表头功能
const userManageBtnList = (index) => {
  switch (index) {
    case 0:
      console.log('新增')
      router.push({ name: 'AddActivity' })
      break
    case 1:
      isShowLead.value = true
      console.log('通过文件批量导入')
      break
    case 2:
      break
    case 3:
      break
    case 4:
      const startArr = data.currentSelectList.map(v => v.id)
      const startFunction = () => {
        const params = { batchType: 'START', ids: startArr }
        batchActivityApi(JSON.stringify(params)).then(res => {
          if (res.status === 200) {
            ElMessage({
              message: res.message,
              type: 'success',
            })
            getActivityList()
          }
        })
      }
      batchHandle(startArr, 'START', startFunction)
      break
    case 5:
      const stopArr = data.currentSelectList.map(v => v.id)
      const stopFunction = () => {
        const params = { batchType: 'STOP', ids: stopArr }
        batchActivityApi(JSON.stringify(params)).then(res => {
          if (res.status === 200) {
            ElMessage({
              message: res.message,
              type: 'success',
            })
            getActivityList()
          }
        })
      }
      batchHandle(stopArr, 'STOP', stopFunction)
      break
    case 6:
      const delArr = data.currentSelectList.map(v => v.id)
      const delFunction = () => {
        const params = { batchType: 'DEL', ids: delArr }
        batchActivityApi(JSON.stringify(params)).then(res => {
          if (res.status === 200) {
            ElMessage({
              message: res.message,
              type: 'success',
            })
            getActivityList()
          }
        })
      }
      batchHandle(delArr, 'DEL', delFunction)
      break
    default:
      break
  }
}
//勾选需求
const getSelectChange = (row) => {
  data.currentSelectList = row
}
//导出列表
const exportList = () => {
  dowloadActivityPersonApi({ id: data.activeId }).then(res => {
    fileDownload({
      fileSuffix: 'xlsx',
      name: '科技活动报名人员信息'
    }, res)
  })
}
//分页查看
const getCurrentChange = (cur) => {
  data.pagination.currentPage = cur
  getActivityList()
}
//每页条数
const getSizeChange = (cur) => {
  data.pagination.size = cur
  getActivityList()
}



//上传文件
const uploadFile = (data) => {
  console.log(data, 'data');

}




//查看活动报名人员
const getActivitySignUpList = () => {
  activityPersonApi({ ipi: data.signUpPagination.currentPage, ips: data.signUpPagination.pageSize, activityId: data.activeId }).then(res => {
    if (res.status === 200) {
      data.signUpTableData = res.data.result
      data.signUpPagination.total = res.data.total
      data.signUpDialog = true
    }
  })
}
//每页条数
const handleSizeChange = (cur) => {
  data.signUpPagination.pageSize = cur
  getActivitySignUpList()
}
//分页
const handleCurrentChange = (cur) => {
  data.signUpPagination.currentPage = cur
  getActivitySignUpList()
}








//行内功能
const comEvent = (type, row) => {
  if (type == 'applicant') {
    data.activeId = row.id
    // data.activeId = '047c69df8fb542ff8e32fcd7cf2f7aec'
    getActivitySignUpList()
  } else if (type == 'edit') {
    router.push({ name: 'EditActivity', params: { id: row.id } })
  } else if (type == 'del') {
    const delFunction = () => {
      let params = {
        batchType: 'DEL',
        ids: [row.id],
      }
      batchActivityApi(JSON.stringify(params)).then((res) => {
        if (res.status === 200) {
          ElMessage({
            message: res.message,
            type: 'success',
          })
          getActivityList()
        }
      })
    }
    lineHandle(row, 'del', delFunction)
  } else if (type == 'enable') {
    const validFunction = () => {
      let params = {
        batchType: row.valid ? 'STOP' : 'START',
        ids: [row.id],
      }
      batchActivityApi(JSON.stringify(params)).then((res) => {
        if (res.status === 200) {
          ElMessage({
            message: res.message,
            type: 'success',
          })
          row.valid = !row.valid
        }
      })
    }
    lineHandle(row, 'valid', validFunction)
  }
}
</script>

<style lang="scss" scoped>
.active-container {
  .person-list {
    display: flex;
    position: relative;
    justify-content: space-between;

    .icon-guanbi1 {
      position: absolute;
      top: -50px;
      right: -34px;
      font-size: 24px;
      color: #fff;
      cursor: pointer;
    }

    .title-left {
      font-size: 18px;
      font-weight: 700;
    }

    .title-right {
      cursor: pointer;

      span {
        font-weight: 700;
      }

      color: #00a2ff;
    }
  }

  .pages {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
}
</style>